<!DOCTYPE html>
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!--响应式兼容-->
  <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>MDUI主题切换器</title>
  <link rel="stylesheet" href="mdui.min.css">
  <style>
    /*调色板样式*/

    #wheel {
      position: relative;
      height: 100%;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center
    }

    .is-small-screen .mdl-gen #wheel {
      min-height: 100vw
    }

    #wheel svg {
      width: 100%;
      height: 100%
    }

    @media (min-width: 840px) {
      #wheel svg {
        max-width: 100%;
        width: 100%
      }
    }

    #wheel .mdl-gen-download {
      position: absolute;
      left: 50%;
      top: 50%
    }

    #wheel .mdl-gen-download a {
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    #wheel g[data-color] {
      opacity: 1;
      outline:none;
      transition: opacity .2s cubic-bezier(.4, 0, 1, 1)
    }

    #wheel .selector {
      opacity: 0;
      transition: opacity .4s cubic-bezier(.4, 0, 1, 1);
      fill: #BDBDBD
    }

    #wheel .selected .selector {
      opacity: 1
    }

    #wheel .label {
      text-anchor: middle;
      opacity: 0;
      transition: opacity .4s cubic-bezier(.4, 0, 1, 1);
      fill: #fff;
      font-size: 24px
    }

    #wheel .selected--1 .label--1,
    #wheel .selected--2 .label--2 {
      opacity: 1
    }

    #wheel svg.hide-nonaccents g[data-color="Blue Grey"]:not(.selected),
    #wheel svg.hide-nonaccents g[data-color="Brown"]:not(.selected),
    #wheel svg.hide-nonaccents g[data-color="Grey"]:not(.selected) {
      opacity: .12
    }

    #wheel .selected {
      opacity: 1 !important
    }

    .mdl-gen>.mdl-grid {
      max-width: 1280px;
      padding: 0
    }

    .mdl-gen__preview {
      position: relative;
      height: 350px
    }

    .mdl-gen__preview .mdl-layout__container {
      height: auto
    }

    .mdl-gen__preview .mdl-layout__content {
      padding: 32px;
      background-color: #EFEFEF;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-align-items: flex-start;
      -ms-flex-align: start;
      align-items: flex-start
    }

    .mdl-gen__preview .mdl-layout__content a {
      margin: 0
    }

    .mdl-gen__preview .mdl-layout__content a {
      -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
      align-self: flex-end
    }

    .mdl-gen__preview .mdl-layout__content h3 {
      margin-top: 0
    }

    .mdl-gen__panel--right {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-align-items: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      padding-bottom: 0
    }

    .mdl-gen__desc strong,
    .mdl-gen__desc p {
      display: block;
      margin-bottom: 32px;
      color: rgba(0, 0, 0, .54)
    }

    .mdl-gen__cdn .demo-code {
      box-sizing: border-box
    }

    .content {
      margin-left: auto;
      margin-right: auto;
      max-width: 1280px;
      margin-bottom: 80px
    }

    /*响应式兼容*/

    @media screen and (min-width:1024px) {
      .pad {
        max-width: 768px;
      }
      #wheel {
        height: 450px;
        width: 450px;
      }
    }

    .pad-card {
      min-height: 300px;
      padding: 10px;
    }

    .pad-subheader {
      font-weight: 500;
    }
    .preview{
      background-color: #EFEFEF;
      height: 450px;
    }
    ::selection{
      background-color: #b3d4fc;
      text-shadow:none;
    }
    .mdui-typo{
      color: rgba(0,0,0,.54);
    }
    .fix{
      margin-bottom: 0px;
    }
    .preview .mdui-typo{
      height:100%;
    }
  </style>
</head>

<body class="mdui-color-grey-200 mdui-theme-primary-blue mdui-theme-accent-pink mdui-loaded">
  <!--占位注释，这里没注释显得不舒服-->
  <span class="mdui-subheader pad pad-subheader mdui-center">主题配色</span>
  <div class="pad pad-card mdui-card mdui-center">
    <div id="wheel" class="mdui-center">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 650 650" preserveAspectRatio="xMidYMid meet" width="650" height="650" class="">
        <defs>
          <filter id="drop-shadow">
            <fegaussianblur in="SourceAlpha" stdDeviation="3.2"></fegaussianblur>
            <feoffset dx="0" dy="0" result="offsetblur"></feoffset>
            <feflood flood-color="rgba(0,0,0,1)"></feflood>
            <fecomposite in2="offsetblur" operator="in"></fecomposite>
            <femerge>
              <femergenode></femergenode>
              <femergenode in="SourceGraphic"></femergenode>
            </femerge>
          </filter>
        </defs>
        <g class="wheel--maing" transform="translate(325,325)">
          <g data-color="Deep Orange" id="Deep Orange" transform="rotate(208.42105263157893)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(255, 87, 34);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(230, 74, 25);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-208.42105263157893)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-208.42105263157893)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Red" id="Red" transform="rotate(227.36842105263156)" tabindex="0" class="selected selected--1">
            <g class="polygons" filter="url(#drop-shadow)">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(244, 67, 54);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(211, 47, 47);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-227.36842105263156)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-227.36842105263156)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Deep Purple" id="Deep Purple" transform="rotate(284.2105263157895)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(103, 58, 183);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(81, 45, 168);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-284.2105263157895)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-284.2105263157895)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Blue" id="Blue" transform="rotate(322.1052631578947)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(33, 150, 243);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(25, 118, 210);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-322.1052631578947)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-322.1052631578947)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Indigo" id="Indigo" transform="rotate(303.1578947368421)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(63, 81, 181);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(48, 63, 159);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-303.1578947368421)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-303.1578947368421)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Purple" id="Purple" transform="rotate(265.2631578947368)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(156, 39, 176);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(123, 31, 162);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-265.2631578947368)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-265.2631578947368)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Brown" id="Brown" transform="rotate(151.57894736842104)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(121, 85, 72);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(93, 64, 55);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-151.57894736842104)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-151.57894736842104)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Teal" id="Teal" transform="rotate(18.94736842105263)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(0, 150, 136);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(0, 121, 107);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-18.94736842105263)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-18.94736842105263)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Pink" id="Pink" transform="rotate(246.3157894736842)" tabindex="0" class="selected selected--2">
            <g class="polygons" filter="url(#drop-shadow)">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(233, 30, 99);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(194, 24, 91);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-246.3157894736842)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-246.3157894736842)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Light Blue" id="Light Blue" transform="rotate(341.05263157894734)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(3, 169, 244);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(2, 136, 209);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-341.05263157894734)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-341.05263157894734)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Green" id="Green" transform="rotate(37.89473684210526)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(76, 175, 80);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(56, 142, 60);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-37.89473684210526)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-37.89473684210526)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Lime" id="Lime" transform="rotate(75.78947368421052)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(205, 220, 57);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(175, 180, 43);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-75.78947368421052)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-75.78947368421052)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Amber" id="Amber" transform="rotate(113.68421052631578)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(255, 193, 7);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(255, 160, 0);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-113.68421052631578)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-113.68421052631578)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Cyan" id="Cyan" transform="rotate(0)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(0, 188, 212);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(0, 151, 167);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(0)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(0)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Grey" id="Grey" transform="rotate(189.4736842105263)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(158, 158, 158);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(97, 97, 97);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-189.4736842105263)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-189.4736842105263)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Blue Grey" id="Blue Grey" transform="rotate(170.52631578947367)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(96, 125, 139);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(69, 90, 100);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-170.52631578947367)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-170.52631578947367)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Orange" id="Orange" transform="rotate(132.6315789473684)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(255, 152, 0);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(245, 124, 0);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-132.6315789473684)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-132.6315789473684)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Yellow" id="Yellow" transform="rotate(94.73684210526315)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(255, 235, 59);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(251, 192, 45);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-94.73684210526315)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-94.73684210526315)" dy="0.5ex">2</text>
            </g>
          </g>
          <g data-color="Light Green" id="Light Green" transform="rotate(56.84210526315789)" tabindex="0" class="">
            <g class="polygons" filter="">
              <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(139, 195, 74);"></polygon>
              <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(104, 159, 56);"></polygon>
            </g>
            <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--1" transform="rotate(-56.84210526315789)" dy="0.5ex">1</text>
            </g>
            <g transform="translate(47.0814230346791,-282.143500046592)">
              <text class="label label--2" transform="rotate(-56.84210526315789)" dy="0.5ex">2</text>
            </g>
          </g>
        </g>
      </svg>
      <div class="mdl-gen-download">
        <a id="apply" class="mdui-ripple mdui-fab mdui-color-theme-accent" mdui-tooltip="{content:&#39;应用主题&#39;}" data-upgraded=",MaterialButton,MaterialRipple" download="material.min.css"><i class="mdui-icon material-icons"></i></a>
      </div>
    </div>
    <div class="mdui-m-a-2 preview">
      <div class="mdui-appbar">
        <div class="mdui-toolbar mdui-color-red" data-preview-primary="">
          <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
          <div class="mdui-typo-title">主题预览</div>
          <div class="mdui-toolbar-spacer"></div>
          <div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
            <button class="mdui-textfield-icon mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></button>
            <input class="mdui-textfield-input" type="text" placeholder="Search">
            <button class="mdui-textfield-close mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></button>
          </div>
        </div>
      </div>
      <div class="mdui-typo mdui-p-a-4">
        <h1>你好！</h1>
        <p>
          举头望涵涵，低头思第一。这个主题切换器用的怎么样啊？(按钮仅供预览，没有实际作用)
        </p>
        <p>
          <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-m-a-1 mdui-color-pink" data-preview-accent="">好</button>
          <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-m-a-1 mdui-color-pink" data-preview-accent="">尚待改进</button>
          <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-m-a-1 mdui-color-pink" data-preview-accent="">加油</button>
        </p>
        <button class="mdui-fab mdui-float-right mdui-ripple fix mdui-color-pink" data-preview-accent=""><i class="mdui-icon material-icons"></i></button>
      </div>
    </div>
  </div>
  <script src="mdui_0.4.0_js_mdui.min.js"></script>
  <script>
    /*这必须凌驾于JS上*/
    var $ = mdui.JQ;//MDUI的选择器，不必引入MDUI了。
    var done= true;//颜色是否全部选择
    var theme = function(){
      var page={
        primary:"blue",
        accent:"pink"
      };
      var preview={
        primary:"red",
        accent:"pink"
      };
      this.set = {
        page:function(primary=false,accent=false){
          if(!primary||!accent) return false;
          if(typeof primary!="string"||typeof accent!="string") return false;
          $("body").removeClass("mdui-theme-primary-"+page.primary);
          $("body").removeClass("mdui-theme-accent-"+page.accent);
          $("body").addClass("mdui-theme-primary-"+primary);
          $("body").addClass("mdui-theme-accent-"+accent);
          page={
            primary:primary,
            accent:accent
          };
          return true;
        },
        preview:function(primary,accent){
          if(!primary||!accent) return false;
          if(typeof primary!="string"||typeof accent!="string") return false;
          $("[data-preview-primary]").removeClass("mdui-color-"+preview.primary);
          $("[data-preview-accent]").removeClass("mdui-color-"+preview.accent);
          $("[data-preview-primary]").addClass("mdui-color-"+primary);
          $("[data-preview-accent]").addClass("mdui-color-"+accent);
          preview = {
            primary:primary,
            accent:accent
          };
        }
      };
      this.info = {
        page:function(){return page;},
        preview:function(){return preview;}
      };
      $("body").addClass("mdui-theme-primary-"+page.primary);//初始化
      $("body").addClass("mdui-theme-accent-"+page.accent);
      $("[data-preview-primary]").addClass("mdui-color-"+preview.primary);
      $("[data-preview-accent]").addClass("mdui-color-"+preview.accent);
      return true;
    };
    theme = new theme();
    var setting = {
      primary:theme.info.preview().primary,
      accent:theme.info.preview().accent
    };
    var unsupportedAccent = ["Grey","Blue Grey","Brown"];
    $("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").addClass("selected selected--1");
    $("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter","url(#drop-shadow)");
    $("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").addClass("selected selected--2");
    $("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter","url(#drop-shadow)");
    $("g[data-color]").on("click",function(e){
      if(done){
        $("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").removeClass("selected selected--1");
        $("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter","");
        $("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").removeClass("selected selected--2");
        $("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter","");
        setting.primary=$(this).attr("data-color").toLowerCase().replace(/ /g,"-");
        console.log("您选择的主色："+$(this).attr("data-color"));
        $(this).addClass("selected selected--1");
        $(this).children("g[filter]").attr("filter","url(#drop-shadow)");
        $("#wheel svg").addClass("hide-nonaccents");
        done=!done;
      }else{
        if($(this).attr("data-color").toLowerCase().replace(/ /g,"-")!=setting.primary&&unsupportedAccent.indexOf($(this).attr("data-color"))==-1){
          setting.accent=$(this).attr("data-color").toLowerCase().replace(/ /g,"-");
          console.log("您选择的强调色："+$(this).attr("data-color"));
          $(this).addClass("selected selected--2");
          $(this).children("g[filter]").attr("filter","url(#drop-shadow)");
          console.log("主题色："+JSON.stringify(setting));
          theme.set.preview(setting.primary,setting.accent);
          $("#wheel svg").removeClass("hide-nonaccents");
          done=!done;
        }
      }
    });
    $("#apply").on("click",function(){
      theme.set.page(setting.primary,setting.accent);
      mdui.snackbar("");
    });
  </script>



</body></html>